<template>
	<div class="content">
		<div class="add">
			<Button type="primary" class="fr" @click="add">添加</Button>
		</div>
		<Table stripe :columns="columns1" :data="list" :loading="loading"></Table>

		<Modal v-model="modal1" title="修改账号" :mask-closable="false">
			<Form :label-width="100" :model="editForm" :rules="rules" ref="editUserForm">
				<FormItem label="用户账号" prop="usernumber">
					<Input disabled class="w-50" v-model="editForm.usernumber" placeholder="请输入账号" />
				</FormItem>
				<FormItem label="用户昵称" prop="username">
					<Input class="w-50" v-model="editForm.username" placeholder="请输入用户昵称" />
				</FormItem>
				<FormItem label="用户密码" prop="password">
					<Input class="w-50" type="password" v-model="editForm.password" placeholder="请输入用户密码" />
				</FormItem>
				<FormItem label="手机号码" prop="mobile">
					<Input class="w-50" v-model="editForm.mobile" placeholder="请输入手机号码" :maxlength="11" />
				</FormItem>
				<FormItem label="用户角色" prop="js">
					<CheckboxGroup v-model="userRole">
						<Checkbox v-for="(item,index) of roleList" :key="index" :label="item.roleName"></Checkbox>
					</CheckboxGroup>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="modal1 = false">取消</Button>
				<Button type="primary" size="large" @click="editConfirm">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal2" title="添加账号" :mask-closable="false">
			<Form :label-width="100" :model="addForm" :rules="rules1" ref="addUserForm">
				<FormItem label="用户账号" prop="usernumber">
					<Input class="w-50" v-model="addForm.usernumber" placeholder="请输入账号" />
					<!-- <div class="tishi">*账号添加不允许修改</div> -->
				</FormItem>
				<FormItem label="用户昵称" prop="username">
					<Input class="w-50" v-model="addForm.username" placeholder="请输入用户昵称" />
				</FormItem>
				<FormItem label="用户密码" prop="password">
					<Input type="password" class="w-50" v-model="addForm.password" placeholder="请输入用户密码" />
				</FormItem>
				<FormItem label="手机号码" prop="mobile">
					<Input class="w-50" :maxlength="11" v-model="addForm.mobile" placeholder="请输入手机号码" />
				</FormItem>
				<FormItem label="用户角色" prop="js">
					<CheckboxGroup v-model="userRole">
						<Checkbox v-for="(item,index) of roleList" :key="index" :label="item.roleName"></Checkbox>
					</CheckboxGroup>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="clearAdd">取消</Button>
				<Button type="primary" size="large" @click="addConfirm">确定</Button>
			</div>
		</Modal>

		<Modal v-model="modal3" title="设置权限" width="40%">
			<CheckboxGroup>
				<Checkbox label="账户管理"></Checkbox>
				<Checkbox label="会员列表"></Checkbox>
				<Checkbox label="认证审核"></Checkbox>
			</CheckboxGroup>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				list: [], // 所有账号数据
				jslist: [], // 角色数据
				yyid: "",
				rules: {
					usernumber: [{
						required: true,
						message: "请输入账号",
						trigger: "blur"
					}],
					username: [{
						required: true,
						message: "请输入用户昵称",
						trigger: "blur"
					}],
					mobile: [{
							required: true,
							message: "请输入手机号码",
							trigger: "blur"
						},
						{
							pattern: /^1[34578]\d{9}$/,
							message: "请输入正确的手机号",
							trigger: "blur"
						}
					],
					password: [{
						required: true,
						message: "请输入用户密码",
						trigger: "blur"
					}]
				},
				rules1: {
					usernumber: [{
						required: true,
						message: "请输入账号",
						trigger: "blur"
					}],
					username: [{
						required: true,
						message: "请输入用户昵称",
						trigger: "blur"
					}],
					mobile: [{
							required: true,
							message: "请输入手机号码",
							trigger: "blur"
						},
						{
							pattern: /^1[34578]\d{9}$/,
							message: "请输入正确的手机号",
							trigger: "blur"
						}
					],
					password: [{
						required: true,
						message: "请输入用户密码",
						trigger: "blur"
					}]
				},
				modal1: false,
				modal2: false,
				modal3: false,
				roleList: [], //用户角色列表
				userRole: [], //当前用户角色
				editForm: {
					usernumber: "",
					username: "",
					mobile: "",
					password: ""
					// quanxian: []
				},
				addForm: {
					usernumber: "",
					username: "",
					mobile: "",
					password: ""
					// quanxian: []
				},
				columns1: [{
						title: "用户账号",
						key: "accountName"
					},
					{
						title: "用户昵称",
						key: "adminName"
					},
					{
						title: "手机号码",
						key: "phone",
						render: (h, params) => {
							return h("div", params.row.phone == null ? "#" : params.row.phone);
						}
					},
					{
						title: "用户角色",
						key: "roleStr",
						render: (h, params) => {
							return h(
								"div",
								params.row.roleStr.length == 0 ? "#" : params.row.roleStr + ""
							);
						}
					},
					{
						title: "添加时间",
						key: "createTime",
						sortable: true,
						render: (h, params) => {
							return h(
								"div",
								params.row.createTime == null ?
								"#" :
								this.stringToTime(params.row.createTime)
							);
						}
					},
					{
						title: "操作",
						key: "action",
						width: 200,
						align: "center",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.edit(this.list[params.index].id);
											}
										}
									},
									"修改"
								),
								//								h(
								//									'Button', {
								//										props: {
								//											type: 'primary',
								//											size: 'small'
								//										},
								//										style: {
								//											marginRight: '5px'
								//										},
								//										on: {
								//											click: () => {
								//												let $this = this;
								//
								//											}
								//										}
								//									},
								//									'权限'
								//								),
								h(
									"Button", {
										props: {
											type: "error",
											size: "small"
										},
										on: {
											click: () => {
												let $this = this;
												this.$Modal.confirm({
													title: "删除运营账号",
													content: "是否要删除运营账号？",
													onOk: function() {
														$this.remove($this.list[params.index].id);
													}
												});
											}
										}
									},
									"删除"
								)
							]);
						}
					}
				]
			};
		},
		methods: {
			// 修改
			edit(id) {
				this.modal1 = true;
				this.yyid = id;
				this.axios.get("admin/account/admin/platform/operatedAccount/" + id).then(res => {
					if(res.data.code == 200) {
						this.editForm.usernumber = res.data.data.accountName;
						this.editForm.username = res.data.data.adminName;
						this.editForm.mobile = res.data.data.phone;
						this.userRole = res.data.data.roleStr;
					}
				});

				this.axios.get("admin/account/admin/platform/allRoles").then(res => {
					if(res.data.code == 200) {
						this.roleList = res.data.data;
					}
				});
			},
			//修改账号的确认回调
			editConfirm() {
				let roleArray = [];
				this.userRole.forEach((role, index) => {
					this.roleList.forEach((item, index) => {
						if(item.roleName == role) {
							roleArray.push(item.id);
							return false;
						}
					});
				});
				let params = this.qs.stringify({
					id: this.yyid,
					accountName: this.editForm.usernumber,
					adminName: this.editForm.username,
					password: this.editForm.password,
					phone: this.editForm.mobile,
					roleIdList: roleArray
				});
				this.axios.post("admin/account/admin/platform/update", params).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.getList();
						this.editForm.password = "";
						this.modal1 = false;
					} else if(res.data.code == 500) {
						this.$Message.info(res.data.msg);
					}
				});
			},
			// // 添加
			add() {
				this.modal2 = true;
				// this.getJuese()
				this.userRole = [];
				this.axios.get("admin/account/admin/platform/allRoles").then(res => {
					if(res.data.code == 200) {
						this.roleList = res.data.data;
					}
				});
			},
			// 添加账号的确认回调
			addConfirm() {
				this.$refs.addUserForm.validate(valid => {
					if(valid) {
						let roleArray = [];
						this.userRole.forEach((role, index) => {
							this.roleList.forEach((item, index) => {
								if(item.roleName == role) {
									roleArray.push(item.id);
									return false;
								}
							});
						});
						let params = this.qs.stringify({
							accountName: this.addForm.usernumber,
							adminName: this.addForm.username,
							password: this.addForm.password,
							phone: this.addForm.mobile,
							roleIdList: roleArray
						});
						this.axios.post("admin/account/admin/platform/addAdminAccount", params).then(res => {
							if(res.data.code == 200) {
								this.$Message.info(res.data.msg);
								this.getList();
								this.clearAdd();
								// this.addForm.quanxian = []
							} else if(res.data.code == 500) {
								this.$Message.info(res.data.msg);
							}
						});
					}
				});
			},
			// 删除
			remove(id) {
				this.axios.delete("admin/account/admin/platform/delete/" + id).then(res => {
					if(res.data.code == 200) {
						this.$Message.info(res.data.msg);
						this.getList();
					} else if(res.data.code == 500) {
						this.$Message.info(res.data.msg);
					}
				});
			},
			// 获取所有账号信息
			getList() {
				this.axios.get("admin/account/admin/platform/allAdminAccount").then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data;
						this.loading = false;
					}
				});
			},
			clearAdd() {
				this.addForm.usernumber = null;
				this.addForm.username = null;
				this.addForm.password = null;
				this.addForm.mobile = null;
				this.modal2 = false;
			}
		},
		created() {
			this.getList();
		}
	};
</script>
<style lang="less">
	.ivu-modal-header {
		padding: 10px 16px;
		background-color: #f8f8f8;
		line-height: 1;
	}
	
	.tishi {
		color: red;
		margin-left: 10px;
		display: inline-block;
	}
</style>